import React, {useState, useEffect} from 'react'
import { getUsers } from '../api/github.ts'
import { Table } from 'antd'
import { IUserItem } from '../api/githubType.js'

export default function AxiosTest() {
    let [ users, setUsers] = useState([])
    let [current, setCurrent] = useState<number>(1); // 当前页
    let [pageSize, setPageSize] = useState<number>(3); // 每页几条
    let [total, setTotal] = useState<number>(5); // 总条数
    useEffect(() => {
        async function main(){
            let res = await getUsers('aa')
            console.log(res);
            setUsers(res.items)
            // console.log(users);
            // 设置总条数
            setTotal(res.items.length)
            
        }
        main()
    }, [])

    const columns : ColumnsType<IUserItem> = [
        {
          title: 'id',
          dateIndex: 'id'
        },
        {
          title: 'login',
          dataIndex: 'login'
        },
        {
          title:'头像',
          render(row:IUserItem) {
              return <a href={row.html_url}> <img width={100} src={row.avatar_url}/> </a>
          }
        }
    ]
  return (
    <div>
      <h3>axios请求数据渲染table练习</h3>
      <Table 
        rowKey={'id'}
        columns={columns}
        dataSource={users}
        pagination={{
          current,
          pageSize,
          total,
          onChange: (page:number,pageSize: number)=> {
            setCurrent(page)
            setPageSize(pageSize)
          }
        }}
      />
    </div>
  )
}
